<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { fetchProjectStatistics } from '@/service/api';
import { useBoolean } from '@sa/hooks';
import * as echarts from 'echarts';

defineOptions({
  name: 'ProjectStatisticsModal'
});

interface Props {
  projectId?: number;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', { required: true });

const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean();

const statistics = ref<Api.Dataplatform.ProjectResourceStatistics>({
  projectId: 0,
  projectName: '',
  memberCount: 0,
  datasourceCount: 0,
  modelCount: 0,
  etlTaskCount: 0,
  assetCount: 0,
  apiCount: 0,
  reportCount: 0
});

const chartRef = ref<HTMLElement>();
let chartInstance: echarts.ECharts | null = null;

async function getStatistics() {
  if (!props.projectId) return;
  
  startLoading();
  const { data, error } = await fetchProjectStatistics(props.projectId);
  if (!error && data) {
    statistics.value = data;
    renderChart();
  }
  endLoading();
}

function renderChart() {
  if (!chartRef.value) return;

  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }

  const option = {
    title: {
      text: '项目资源统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '资源统计',
        type: 'pie',
        radius: '50%',
        data: [
          { value: statistics.value.memberCount, name: '成员' },
          { value: statistics.value.datasourceCount, name: '数据源' },
          { value: statistics.value.modelCount, name: '数据模型' },
          { value: statistics.value.etlTaskCount, name: 'ETL任务' },
          { value: statistics.value.assetCount, name: '数据资产' },
          { value: statistics.value.apiCount, name: '数据API' },
          { value: statistics.value.reportCount, name: '报表' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  chartInstance.setOption(option);
}

watch(visible, val => {
  if (val) {
    getStatistics();
  }
});

onMounted(() => {
  window.addEventListener('resize', () => {
    chartInstance?.resize();
  });
});
</script>

<template>
  <NModal v-model:show="visible" title="项目资源统计" preset="card" class="w-800px">
    <NSpin :show="loading">
      <div class="space-y-16px">
        <NDescriptions :column="2" bordered>
          <NDescriptionsItem label="项目名称">
            {{ statistics.projectName }}
          </NDescriptionsItem>
          <NDescriptionsItem label="成员数量">
            <NTag type="info">{{ statistics.memberCount }}</NTag>
          </NDescriptionsItem>
          <NDescriptionsItem label="数据源数量">
            <NTag type="success">{{ statistics.datasourceCount }}</NTag>
          </NDescriptionsItem>
          <NDescriptionsItem label="数据模型数量">
            <NTag type="warning">{{ statistics.modelCount }}</NTag>
          </NDescriptionsItem>
          <NDescriptionsItem label="ETL任务数量">
            <NTag type="error">{{ statistics.etlTaskCount }}</NTag>
          </NDescriptionsItem>
          <NDescriptionsItem label="数据资产数量">
            <NTag>{{ statistics.assetCount }}</NTag>
          </NDescriptionsItem>
          <NDescriptionsItem label="数据API数量">
            <NTag type="info">{{ statistics.apiCount }}</NTag>
          </NDescriptionsItem>
          <NDescriptionsItem label="报表数量">
            <NTag type="success">{{ statistics.reportCount }}</NTag>
          </NDescriptionsItem>
        </NDescriptions>

        <div ref="chartRef" class="h-400px"></div>
      </div>
    </NSpin>
  </NModal>
</template>
